<template>
  <div>
    <section style="text-align:center">
      <Upload
        multiple
        type="drag"
        :on-success="handleSuccess"
        :format="['xls','xlsx']"
        :on-format-error="handleFormatError"
        :headers="{'Authorization': uptoken}"
        :action="upUrl">
        <div style="padding: 20px 0">
          <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
          <p>点击或者拖拽文件进行导入</p>
        </div>
      </Upload>
      <a style="display:block;height:110px;width:100%;border:1px dashed #ccc;padding: 20px 0; background:#fff" href="http://oss.x-link.cc/template/小黄山报表模板.xlsx">
        <Icon type="ios-cloud-download" size="52" style="color: #3399ff"></Icon>
        <p>点击下载模板</p>
      </a>
    </section>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        uptoken: '',
        upUrl: 'https://www.x-link.cc/XlXhsCommonChart/uploadExcelDataFile'
      }
    },
    mounted () {
      this.uptoken = this.$store.state.currentToken
    },
    methods: {
      handleSuccess (res, file) {
        console.log(res)
        if (res.isSuccess === 1) {
          this.$Notice.warning({
            title: '导入成功',
            desc: '文件' + file.name + res.res
          })
        } else {
          this.$Notice.warning({
            title: '导入失败',
            desc: res.res
          })
        }
      },
      handleFormatError (file) {
        this.$Notice.warning({
          title: '导入错误',
          desc: '文件' + file.name + '不是表格类型'
        })
      }
    }
  }
</script>
